<template>
	<el-container>
        <el-header>
            <div>付款单</div>
            <div class="left-panel">
                <el-button type="primary">历史单据</el-button>
                <div class="right-panel-search">
                    <div class="number" style="margin:0 20px"><text style="width:50px">单据编号</text><el-input v-model="number" /></div>
                    <div class="number"><text style="width:50px">业务日期</text>
                        <el-date-picker v-model="time" type="data" style="width:70%" placeholder="请选择报工日期" :clearable="false" />
                    </div>
                </div>
            </div>
        </el-header>
        <el-main>
            <el-header>
                <div class="right-panel">
                    <div class="number">
                        <text class="text">选择客户</text>
                        <el-input placeholder="请选择客户" readonly v-model="kehuName" />
                        <el-button type="primary" @click="select">选择</el-button>
                    </div>
                    <div class="number">
                        <text class="text">经手人</text>
                        <el-select v-model="number" placeholder="请选择经手人" filterable>
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </div>
                     <div class="ying">应付款(元)<text class="text">2000</text></div>
                     <div class="ying">预付款(元)<text class="text">200</text></div>
                </div>
            </el-header>
            <el-form ref="ruleForm" :model="numList" :rules="rules">
                <el-form-item prop="list">
                    <sc-form-table ref="table" v-model="numList.list" :addTemplate="addTemplate" placeholder="暂无数据" :dragSort="false" >
                        <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>?
                        <el-table-column prop="type" label="付款账户" width="250" align="center">
                            <template #default="scope">
                                <el-select v-model="scope.row.type" placeholder="请选择" filterable>
                                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" label="付款金额(元)" width="250" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.price" class="inputDeep" />
                            </template>
                        </el-table-column>
                    </sc-form-table>
                </el-form-item>
            </el-form>
            <div class="all">
                <div class="number"><text class="text">合计实付</text><el-input v-model="number" readonly />元</div>
                <div class="number" style="margin:0 20px"><text class="text">优惠金额</text><el-input v-model="number" />元</div>
                <div class="number" style="margin:0 20px"><text class="text">预付款抵扣</text><el-input v-model="number" />元</div>
                <div class="number" style="margin:0 20px"><text class="text">总计金额</text><el-input v-model="number" readonly />元</div>
            </div>
            <el-header>
                <div>核销单据</div>
                <el-button type="primary" @click="add">选择应付单据</el-button>
            </el-header>
            <el-form ref="ruleForm" :model="form" :rules="rules">
                <el-form-item prop="list">
                    <sc-form-table ref="table" v-model="form.list" :addTemplate="addTemplate" placeholder="暂无数据" :dragSort="false" hideAdd>
                        <el-table-column prop="time" label="业务日期" align="center"></el-table-column>
                        <el-table-column prop="number" label="单据编号" align="center"></el-table-column>
                        <el-table-column prop="numType" label="单据类型" align="center"></el-table-column>
                        <el-table-column prop="allNum" label="总计金额(元)" align="center"></el-table-column>
                        <el-table-column prop="heOk" label="已核销(元)" align="center"></el-table-column>
                        <el-table-column prop="heNo" label="未核销(元)" align="center"></el-table-column>
                        <el-table-column prop="useHe" label="本次核销金额(元)" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.useHe" class="inputDeep" />
                            </template>
                        </el-table-column>
                    </sc-form-table>
                </el-form-item>
            </el-form>
            <div class="number" style="margin-bottom:10px">
                <text class="text">备注信息</text>
                <el-input type="textarea" v-model="number" style="width:20%" /></div>
            <div class="number">
                <text class="text">关联图片</text>
                <sc-upload-multiple v-model="fileurl2" draggable :limit="5" tip="(支持: ipg jpeg png 最多上传5张)"></sc-upload-multiple>
            </div>
        </el-main>
        <el-footer style="display:flex;justify-content: space-between;">
            <div style="display:flex">
                <div class="number"><text class="text">制单人</text><text>测试的</text></div>
                <div class="number"><text class="text">制单时间</text><text>{{dataTime}}</text></div>
            </div>
            <div>
                <el-button >打印</el-button>
                <el-button type="primary">记账</el-button>
                <el-button type="primary">记账并打印</el-button>
                <el-button type="primary">记账并新增</el-button>
                <el-button >取消</el-button>
            </div>
        </el-footer>
    </el-container>
</template>

<script>
export default {
	name: 'user',
	data() {
		return {
            dialog: {
				save: false
			},
            kehu:{
                save:false
            },
			apiObj: this.$API.basic.apply.lists,
			search: {
				title: null,
				cid: null,
			},
			//所需数据选项
			cates: [],
            time: new Date(),
            form:{
                list: [
                    {id:1,type: 'a', price: '12',number:"SC7192843",allNum:'',numType:"微信",heOk:'',heNo:'',useHe:'',time:'2021-06-30'},
                    {id:2,type: 'c', price: '12',number:"SC7192843",allNum:'',numType:"微信",heOk:'',heNo:'',useHe:'',time:'2021-06-30'},
                    {id:3,type: 'c', price: '12',number:"SC7192843",allNum:'',numType:"现金",heOk:'',heNo:'',useHe:'',time:'2021-06-30'},
                    {id:4,type: 'b', price: '12',number:"SC7192843",allNum:'',numType:"银行",heOk:'',heNo:'',useHe:'',time:'2021-06-30'},
                ],

            },
            options:[
                {id:"1",name:"现金"},
                {id:"2",name:"银行"},
                {id:"3",name:"微信"},
            ],
            dataTime: "",
            timer: null,
            numList:{
                list: [
                    {
                        type: '',
                        price:"",
                    },
                    {
                        type: '',
                        price:"",
                    },
                    {
                        type: '',
                        price:"",
                    },
                    {
                        type: '',
                        price:"",
                    },
                ]
            },
            addTemplate: {
                type: '',
                price:"",
            },
            kehuName:"",
            kehuId:"",
		}
	},
	mounted() {
		// this.getCate()
        this.timer = setInterval(() => {
            this.getCurrentTime();
        }, 1000);
	},
	methods: {
        getCurrentTime() {
            const date = new Date();
            const year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let hour = date.getHours();
            let minute = date.getMinutes();
            if (month < 10) {
                month = `0${month}`;
            }
            if (day < 10) {
                day = `0${day}`;
            }
            if (hour < 10) {
                hour = `0${hour}`;
            }
            if (minute < 10) {
                minute = `0${minute}`;
            }
            this.dataTime = `${year}-${month}-${day} ${hour}:${minute}`;
        },
		//加载树数据
		async getCate(){
			var res = await this.$API.cms.profile.article_cate.get();
			this.cates = res.data;
		},
        add(){
            this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('put')
			})
        },
        select(){
            this.kehu.save = true
			this.$nextTick(() => {
				this.$refs.kehuDialog.open('put')
			})
        },
        handleSuccess(data) {
             console.log('data :>> ', data);
            this.form.list = data
		}
	}
}
</script>

<style lang="scss" scoped>
.all{
    display: flex;
    align-items: center;
}
.number{
    display: flex;
    align-items: center;
        .text{
            width: 120px;
            text-align: end;
            margin-right: 15px;
        }
}
.ying{
    margin: 0 40px;
    .text{
        color: red;
    }
}
</style>
